<template>
  <div class="admin-canshu">
    <div class="divmain-case">
      <div ref="contraTop" class="divmain-case-top">
        <div class="divmain-case-top">
          <div style="font-size: 14px; color: #333333">密码</div>
          <el-input
            style="width: 240px; margin-left: 6px; margin-right: 12px"
            type="password"
            v-model="psdValue"
            placeholder="输入密码登录方可修改参数配置"
          ></el-input>
          <el-button type="primary" @click="loginBtn" style="width: 72px"
            ><img
              src="../../../assets/images/denglv_icon.png"
              style="
                width: 16px;
                height: 16px;
                margin-right: 2px;
                margin-top: -2px;
              "
              alt=""
              srcset=""
            />登录</el-button
          >
        </div>
        <div
          style="width: 1px; height: 32px; background: #ebebeb; margin: 0 12px"
        ></div>
        <div class="divmain-case-top">
          <div style="font-size: 14px; color: #333333">变量名称</div>
          <el-input
            style="width: 240px; margin-left: 6px; margin-right: 12px"
            v-model="searchValue"
            placeholder="请输入关键词"
          ></el-input>
          <el-button type="primary" @click="searchClick" style="width: 72px"
            ><img
              src="../../../assets/images/search_icon.png"
              style="
                width: 16px;
                height: 16px;
                margin-right: 2px;
                margin-top: -2px;
              "
              alt=""
              srcset=""
            />查询</el-button
          >
        </div>
      </div>
      <div class="line"></div>
      <div class="canshu">
        <div class="canshu-left">
          <div class="button-case">
              <div class="button-case-box" @click="saveClick">
                <img
                  src="../../../assets/images/ok_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>确定</div>
              </div>
              <div class="button-case-box">
                <img
                  src="../../../assets/images/replace_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>替换软件值</div>
              </div>
              <div @click="exitBtn" class="button-case-box">
                <img
                  src="../../../assets/images/quit_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>退出</div>
              </div>
              <div class="button-case-box">
                <img
                  src="../../../assets/images/der_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>导出</div>
              </div>
            </div>
          <xinpuTableGrid
            ref="xinpuGrid"
            :loading="loading"
            :tableHeight="tableHeight"
            :tableWidth="tableWidth"
            :columnsData="columns"
            :data="data"
            @updataSelect="updataSelect"
            @selectCheckedChange="selectCheckedChange"
            :clickTransfer="true"
            @clickTransferData="clickTransferDatas"
          >
          </xinpuTableGrid>
        </div>
        <div class="canshu-right">
          <div>
            <div style="width:100%;
            height: 40px;
            border-top:1px solid #EBEBEB;
            border-left:1px solid #EBEBEB;
            border-right:1px solid #EBEBEB;
            display: flex;
            align-items: center;
            padding-left:12px;
            box-sizing: border-box;
            font-size: 14px;
            color: #333333;
            border-radius: 4px 4px 0px 0px;
            ">医院选择值</div>
            <vxe-table
              height="289px"
              :row-config="{isCurrent: true,isHover: true}"
              @cell-dblclick="cellDblclickEvent"
              style="margin-bottom: 12px"
              :data="tableData"
            >
              <vxe-column field="blxh" title="选择序号"  width="100"></vxe-column>
              <vxe-column field="blmc" title="变量名称" show-overflow></vxe-column>
              <vxe-column field="blxzxh" width="90" title="医院选择值"></vxe-column>
              <vxe-column
                field="blxzmc"
                width="120"
                title="医院选择值名称"
              ></vxe-column>
            </vxe-table>
          </div>
          <div class="canshu-right-case">
            <div class="canshu-right-case-box-one">
              <div style="width:100%;
              height: 40px;
              border-top:1px solid #EBEBEB;
              border-left:1px solid #EBEBEB;
              border-right:1px solid #EBEBEB;
              display: flex;
              align-items: center;
              padding-left:12px;
              box-sizing: border-box;
              font-size: 14px;
              color: #333333;
              border-radius: 4px 4px 0px 0px;
              ">医院原参考值</div>
              <vxe-table height="210px" :data="tableDatacankao">
                <vxe-column field="name" title="医院原参考值"></vxe-column>
                <vxe-column
                  field="address"
                  title="医院原参考值说明"
                ></vxe-column>
              </vxe-table>
            </div>
            <div class="canshu-right-case-box">
              <vxe-table height="100%" :data="tableDatashuoming">
                <vxe-column field="name" title="参数说明"></vxe-column>
              </vxe-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import xinpuTableGrid from "@/components/xinpuTableGrid/index.vue";
import { ref, onMounted } from "vue";
const psdValue = ref('')
const searchValue = ref("");
const tableData = ref([]);
const tableDatacankao = ref([]);
const tableDatashuoming = ref([]);
const loading = ref(false);
const xinpuGrid = ref(null);
const tableHeight = ref(0);
const tableWidth = ref(0);
const contraTop = ref(null);
const columns = ref([
  // { type: "checkbox", width: 48 },
  { field: "mkxh", title: "模块序号", width: 100},
  { field: "mkmc", title: "模块名称", width: 160},
  { field: "blsm", title: "变量说明", width: 160},
  { field: "blxh", title: "选择序号", width: 160},
  { field: "blmc", title: "变量名称", width: 500},
  { field: "blxzxh", title: "医院选择值", width: 100,  editRender: { name: "input" } },
]);
const data = ref([]);
const rightOneArr = ref([])
const whetherLogin = ref(false)
const gettableHeight = () => {
  // 这里是屏幕大小变化时需要执行的逻辑
  let screenheight = document.body.clientHeight;
  let screenWidth = document.body.clientWidth - 240 - 437;
  screenheight = screenheight - contraTop.value.offsetHeight - 188;
  tableHeight.value = screenheight;
  tableWidth.value = screenWidth;
};
const getData = async()=>{
  loading.value = true
  const res = await window.xinpuHttpApi('100160',{'mkmc':searchValue.value})
  if(res && res.ReContent){
    data.value = res.ReContent
    // pageNo.value.total = res.ReContent.RecordCount
  }
  loading.value = false
}
// 确定按钮
const saveClick = async() =>{
  const arr = xinpuGrid.value.getEditData();
  if(arr && arr.length>0){
    arr.forEach(item=>{
      item.saveflag = '2'
    })
    if(whetherLogin.value){
      const res = await window.xinpuHttpApi('100161',{'list':data.value})
      if(res && res.Flag){
        ElMessage({
            message: '保存成功',
            type: 'success',
        })
        getData()
      }else{
        ElMessage.error(res.CodeMsg)
      }
    }else{
      ElMessage({
          message: '请先登录',
          type: 'warning',
      })
    }
  }else{
    ElMessage({
        message: '当前没有要保存的数据',
        type: 'warning',
    })
  }
}
// 下拉框需要修改的数据
const updataSelect = (val, column) => {
  if(column.column && column.column.field == 'wx_sfxs'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.dm;
  }
};
// 获取下拉框里选中的复选框
const selectCheckedChange = (val, column) => {};
// 获取点击的右键菜单的数据
const updataOptions = (data) => {
  console.log(data);
};
// 获取右边第一个表格的所有值
const getRightArr = async() => {
  const res = await window.xinpuHttpApi('100162',{})
  if(res && res.ReContent){
    rightOneArr.value = res.ReContent
  }
}
// 获取点击表格的值
const clickTransferDatas = async(data) => {
  tableData.value = []
  if(data.row && data.row.blxh){
    rightOneArr.value.forEach(v=>{
      if(v.blxh == data.row.blxh){
        tableData.value.push(v)
      }
    })
    tableDatacankao.value = [
      {
        name:data.row.cs_yckz,
        address:data.row.cs_yckz_sm
      }
    ]
    tableDatashuoming.value = [
      {
        name:data.row.cs_sm
      }
    ]
  }
};
const cellDblclickEvent = ({ row }) => {
  data.value.forEach(it=>{
    if(it.blxh == row.blxh){
      it.blxzxh = row.blxzxh
    }
  })
}
// 登录
const loginBtn = async() =>{
  const res = await window.xinpuHttpApi('100159',{'bh':psdValue.value})
  if(res && res.Code == 1){
    whetherLogin.value = true
    ElMessage({
        message: '登录成功',
        type: 'success',
    })
  }
}
// 退出
const exitBtn = ()=>{
  whetherLogin.value = false
  ElMessage({
      message: '退出成功',
      type: 'success',
  })
}
const searchClick = () => { getData() };
onMounted(() => {
  gettableHeight();
  getData()
  getRightArr()
});
</script>

<style lang="scss" scoped>
.admin-canshu {
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;
  .divmain-case {
    width: 100%;
    height: calc(100vh - 100px);
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    .divmain-case-top {
      display: flex;
      align-items: center;
    }
    .line {
      width: 100%;
      height: 1px;
      background: #ebebeb;
      margin: 12px 0;
    }
  }
  .button-case {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333333;
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    border-top:1px solid #EBEBEB;
    border-left:1px solid #EBEBEB;
    border-right:1px solid #EBEBEB;
    border-radius: 4px 4px 0 0;
    .button-case-box {
      display: flex;
      align-items: center;
      margin-right: 12px;
      cursor: pointer;
    }
  }
  .canshu {
    width: 100%;
    height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    // margin-top: 16px;
    box-sizing: border-box;
    overflow: hidden;
    .canshu-left {
      flex: 1;
      height: calc(100vh - 180px);
      overflow: hidden;
    }
    .canshu-right {
      flex: 0 0 429px;
      height: calc(100vh - 180px);
      margin-left: 8px;
      display: flex;
      flex-direction: column;
      .canshu-right-case {
        width: 429px;
        height: calc(100vh - 520px);
        // background: #333333;
        display: flex;
        flex-direction: column;
        .canshu-right-case-box-one {
          width: 100%;
          flex: 0 0 auto; /* 不伸缩，固定高度 */
          height: 250px; /* 固定高度设置 */
        }
        .canshu-right-case-box {
          margin-top: 12px !important;
          width: 100%;
          flex: 1 1 auto;
        }
      }
    }
  }
}
</style>